<template>
  <div class="loginContent">
    <div class="loginBox">
      <div class="boxLeft">
        <img :src="appStore.config.login_img" alt="" />
      </div>
      <div class="boxRight">
        <div class="title">后台登录</div>  
        <el-form
          class="login-form"
          ref="formRef"
          :model="formData"
          :rules="rules"
        >
          <el-form-item prop="user_name">
            <el-input
              v-model="formData.user_name"
              placeholder="请输入账号"
              size="large"
              @keyup.enter="handleEnter"
            >
              <template #prepend>
                <icon name="el-icon-User" />
              </template>
            </el-input>
          </el-form-item>

          <el-form-item prop="password">
            <el-input
              ref="passwordRef"
              size="large"
              v-model="formData.password"
              show-password
              placeholder="请输入密码"
              @keyup.enter="handleLogin"
            >
              <template #prepend>
                <icon name="el-icon-Lock" />
              </template>
            </el-input>
          </el-form-item>
        </el-form>
        <div class="mb-5">
            <el-checkbox v-model="remAccount" label="记住账号"></el-checkbox>
        </div>

          <el-button
            type="primary"
            style="width: 100%; 
            margin-top: 30px"
            :loading="loading"
            size="large"
            @click="handleLogin">登录</el-button>
   
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref,reactive } from "vue";
import { getItem, setItem,removeItem } from '@/utils/storage'
import { useUserStore } from "@/stores/user"
import { useRouter } from 'vue-router'
import { ACCOUNT_KEY } from '@/enums/cacheEnums'
import { useAppStore } from '@/stores/app' 
const appStore = useAppStore()

const router = useRouter()
const store = useUserStore() 
const formRef = ref(null)
const passwordRef = ref(null)
const remAccount = ref(false)
const loading = ref(false)

const formData = reactive({
  user_name: "",
  password: "",
});
const rules = {
    user_name: [
    {
      required: true,
      message: "请输入账号",
      trigger: ["blur"],
    },
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: ["blur"],
    },
  ],
};

// 回车按键监听
const handleEnter = () => {
  if (!formData.password) {
    return passwordRef.value?.focus();
  }
  handleLogin();
};
const handleLogin = async () => {
  await formRef.value?.validate(); 
  loading.value = true
  await store.login(formData).then(()=>{
    router.push('/user') 
     loading.value = false
  }).catch(()=>{
    loading.value = false
  })
  
  // 记住账号，缓存
  if(remAccount.value){
    setItem(ACCOUNT_KEY,formData.user_name) 
  }else{
    removeItem(ACCOUNT_KEY)
  }
};

onMounted(() => {
    const value = getItem(ACCOUNT_KEY)
    if (value) {
         remAccount.value = true
        formData.user_name = value
    }
})
</script>

<style scoped lang="scss">
  .loginContent{
    width: 100%;
    height: 100vh;
    background: url("@/assets/images/login_bg.png") no-repeat center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    .loginBox{
        width: 500px;
        height: 400px;
        display: flex;
        background: #fff;
        border-radius: 10px;
        overflow: hidden;
        .boxRight{
            flex: 1;
            padding: 40px;
            box-sizing: border-box;
            .title{
                font-size: 20px;
                margin-bottom: 32px;
                text-align: center;
                color: #333;
                height: 30px;
                line-height: 30px;
                font-weight: lighter;
                padding-top: 15px;
            }
        }
    }
  }
</style>
